/*
  学习目标：知道React中this指向问题, 知道处理办法
  特点: 
    1. React自带结构体中this指向组件实例, React源码内部处理this
        : render 生命周期钩子函数,属于自带结构体
    2. React非自带结构体中this指向undefined
  原理: 通过箭头函数自动绑定this解决
  步骤：
     1. 在render函数内, 使用箭头函数绑定事件 
     2. 使用箭头定义事件
     3. 
*/

import React, { Component } from 'react';

export default class App extends Component {
  state = { count: 100 };

  handleClick() {
    // console.log('this  ----->  ', this);
  }

  handleClick2 = () => {};

  render() {
    console.log('this  ----->  ', this);
    return (
      <div>
        <h1>{this.state.count}</h1>
        <button onClick={() => this.handleClick()}>点我访问this</button>

        <button onClick={this.handleClick2}>点我访问this</button>
      </div>
    );
  }
}

// React中this指向？
// 1. react自带结构体, this指向正确, 指向实例对象
// 2. 非自带结构体, this指向undefined

// 1. render函数, 使用箭头函数绑定事件
// 2. 使用箭头函数定义事件
